<!DOCTYPE html>
<html>
<head>
    <title>{$seo.title}--SAMPLES</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="SAMPLES" />
    <meta name="keywords" content="SAMPLES" />

    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <!-- css -->
    <link rel="shortcut icon" type="image/x-icon" href="__ADMIN__img/a1.jpg" />
    <link href="__HOME__css/iconfont.css" rel="stylesheet"/>
    <link href="__HOME__css/am.css" rel="stylesheet"/>
    <link href="__HOME__css/flexslider.css" rel="stylesheet"/>
    <link href="__HOME__css/style.css" rel="stylesheet"/>
    <link rel="stylesheet" href="__HOME__css/blueimp-gallery.min.css">
</head>
<body>

<div class="wrap">
    <!--导航-->
    {include file="public/header" /}


    <!-- page_banner -->
    <div class="page_banner magtopmenu">
        <div class="pagebanner_pic">
            <ul class="page_banner_slider clear">
                {volist name="banner" id="v" key="k"}
                <li>
                    <div class="pic" style=" background:url({$v.img_url}) center center no-repeat;background-size:cover; height:600px; "></div>
                    <div class="desc">
                        {$v.content}
                    </div>
                </li>
                {/volist}
            </ul>
        </div>
    </div>
    <!-- page_banner end -->


    <!-- position -->
    <div class="position_content">
        <div class="public">
            <div class="position">
                <i class="iconfont icon-zhuye"></i>
                <a href="#">Home</a> >
                <a href="#">Samples</a>
            </div>
        </div>
    </div>
    <!-- position end -->



    <!-- page -->
    <div class="samples">
        <div class="public">
            <div class="samples_sort">
                <ul class="clear">
                    <li class="fl am _sort active">
                        <a class="am type">All</a>
                    </li>
                    {volist name="type" id="v" key="k"}
                    <li class="fl am _sort ">
                        <a class="am type" data-id="{$v.id}">{$v.name}</a>
                    </li>
                    {/volist}
                </ul>

            </div>
            <div class="samples_list">
                <ul class="col-4 clear" id="list">
                    {volist name="list" id="v" key="k"}
                    <li class="fl">
                        <a href="{$v.img_url}" title="{$v.name}" data-gallery="">
                            <div class="pic am">
                                <div class="pic_img am" style="background: url({$v.img_url}) center center no-repeat;background-size: cover;height: 190px;"></div>
                                <div class="pic_open am">
                                    <i class="iconfont icon-datu"></i>
                                </div>
                            </div>
                            <p class="_title am">{$v.name}</p>
                        </a>
                    </li>
                    {/volist}


                </ul>
                <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
                    <div class="slides"></div>
                    <h3 class="title"></h3>
                    <a class="prev">‹</a>
                    <a class="next">›</a>
                    <a class="close">×</a>
                    <!-- <a class="play-pause"></a> -->
                    <ol class="indicator"></ol>
                </div>
            </div>
        </div>
    </div>

    {include file="public/footer" /}
<script type="text/javascript">
    $('._sort').click(function(){
        $(this).addClass("active").siblings().removeClass("active");
    });
    $('.type').click(function(){

        var type = $(this).attr('data-id');
        $.ajax({
            type: "post",
            dataType: "json",
            url: '/home/sample/getListBytype',
            data: {'type':type},
            success: function (res) {
                var success = JSON.parse(res);
                if(success.code===200){
                    console.log(success.data);
                    var html = '';
                    $.each(success.data,function(index,value) {
                        var da = '<li class="fl">\n' +
                            '                        <a href="'+value.img_url+'" title="'+value.name+'" data-gallery="">\n' +
                            '                            <div class="pic am">\n' +
                            '                                <div class="pic_img am" style="background: url('+value.img_url+') center center no-repeat;background-size: cover;height: 190px;"></div>\n' +
                            '                                <div class="pic_open am">\n' +
                            '                                    <i class="iconfont icon-datu"></i>\n' +
                            '                                </div>\n' +
                            '                            </div>\n' +
                            '                            <p class="_title am">'+value.name+'</p>\n' +
                            '                        </a>\n' +
                            '                    </li>';
                        html+=da;
                    });
                    $('#list').html(html);
                }else {

                }

            }
        });
    })
</script>
